/**
* @作者:晋尧
* @创建时间：2021/7/16
* @修改时间：2021/7/21
*/

<template>
	<view class="main">
		<!-- 头部导航栏 -->
		<view class="header">
			<img src="/static/xiangzulogo.png" style="width: 176rpx; height: 99rpx;" fit="cover" class="logo">
			<!-- 导航栏内部元素 -->
			<view class="navitems">
				<el-badge :value="messageNum" class="navitem" hidden="messageNum==0">
					<view @click="jumpToMessage">消息</view>
				</el-badge>
				<view class="navitem" @click="logOut">退出登录</view>
			</view>
		</view>
		<!-- 页面元素 -->
		<view class="title">
			<h1>确认订单</h1>
		</view>
		<view class="infobar">
			<view class="infomsg">商品信息</view>
		</view>
		<!-- 商品信息 -->
		<view class="goodsinfo">
			<view class="confirmImg">
				<view class="Img">
					<el-image style="width: 200px; height: 200px" :src='"http:////47.96.168.135:7388"+imgSrc[0]'
						:fit="contain"></el-image>
					<!-- <img class="goodsImg_content" :src='"http:////47.96.168.135:7388"+imgSrc[0]' alt="" /> -->
				</view>
			</view>
			<!-- 商品细节 -->
			<view class="goodsDetail1">
				<view class="gooodsDetail1_content">
					<view class="goodsnamerow goodsParamHeight">

						<view class="goodsName">
							<h2>{{ goodsName }}</h2>
						</view>

						<view class="shop">
							<el-button type="text"><em>{{ shopName }}</em></el-button>
						</view>
					</view>

					<view class="goodsParamHeight descriptionRow">{{ description }}</view>

					<view class="goodsParamHeight pricerow">
						<div style="width: 20%;">日租：</div>
						<div>
							<view class="showprice">￥<em>{{ settings[radio-1].price }}</em></view>
						</div>
					</view>
					<view class="goodsParamHeight settingrow">
						<view style="width: 14%;">选择配置：</view>
						<view class="settingbox">
							<el-radio v-for="(setting,index) in settings" :key="index" v-model="radio" :label="index+1"
								border @change="setTotalPrice">{{ setting.value }}</el-radio>
							<!-- <el-radio v-model="radio1" label="2" border>备选项2</el-radio> -->
						</view>
					</view>
				</view>
			</view>
			<!-- 最右侧商品细节 -->
			<view class="goodsDetail2">
				<view class="goodsDetail2_content">
					<view class="rentTimeRow" style="height: 40%;">
						<div style="width: 15%;">租赁时间：</div>
						<el-date-picker v-model="date" type="daterange" range-separator="至" start-placeholder="开始日期"
							end-placeholder="结束日期" :picker-options="pickerOptions" @change="handleChange">
						</el-date-picker>
					</view>
					<view class="rentNumRow" style="height: 30%;">
						<div style="width: 15%;">数量：</div>
						<el-input-number v-model="num" @change="handleNumChange" :min="1" :max="settings[radio-1].stock"
							label="描述文字" class="show_num"></el-input-number>
					</view>
				</view>
			</view>
		</view>
		<!-- 用户收货地址 -->
		<view class="infobar">
			<view class="infomsg">收货地址</view>
		</view>
		<view class="address">
			<view class="address_box">
				<view class="addressMsg">
					<view style="font-size: 25px;">选择收货地址：</view>
				</view>
				<view class="address_content">
					<el-radio v-model="addressradio" style="height: 80rpx;" v-for="(user,index) in users" :key="index"
						:label="index+1">
						{{ user.receiverName }}&nbsp;&nbsp;{{ user.province+user.city+user.town+user.area }}&nbsp;&nbsp;{{ user.detailInfo }}&nbsp;&nbsp;{{ user.phoneNum }}
					</el-radio>
					<!-- <el-radio v-model="radio" label="2" class="addressitem">备选项</el-radio> -->
				</view>
			</view>
		</view>
		<!-- 确认按钮 -->
		<view class="confirm">
			<view class="confirm_box">
				<view class="confirmPrice">
					<view style="font-size: 25px;">应付：</view>
					<view class="totalPrice">￥{{ totalPrice }}</view>
					<view style="font-size: 25px;">(&nbsp;+</view>
					<view class="totalPrice">{{ settings[radio-1].deposit*num }}</view>
					<view style="font-size: 25px;">元押金=</view>
					<view class="totalPrice">￥{{ payment }}</view>
					<view style="font-size: 25px;">)</view>
				</view>
				<view class="confirmButton">
					<el-button type="danger" style="width: 200px;" @click="confirmOrder">确认订单</el-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageId: 1,
				goodsName: 'default',
				shopName: 'default',
				description: 'default',
				radio: 1,
				addressradio: 1,
				addressId: 1,
				num: 1,
				date: '',
				dateIsChanged: false,
				year: [],
				month: [],
				day: [],
				totalPrice: 0,
				deposit: 0,
				payment: 0,
				rentTime: [],
				imgSrc: ['http://image1.suning.cn/uimg/b2c/newcatentries/0000000000-000000000614364454_4_800x800.jpg'],
				arr: [],
				isLoad: false,
				users: [{
					area: "珞南街道",
					city: "武汉市",
					customerId: 1,
					detailInfo: "详细信息",
					id: 1,
					phoneNum: "114514",
					province: "湖北省",
					receiverName: "买家1",
					town: "洪山区",
				}, ],
				settings: [{
						value: "配置1",
						id: 1,
						price: 16,
						leftnum: 100,
						deposit: 0,
					},
					{
						value: "配置2",
						id: 2,
						price: 18,
						leftnum: 10,
						deposit: 0,
					},
					{
						value: "配置3",
						id: 3,
						price: 17,
						leftnum: 1000,
						deposit: 0,
					},
					{
						value: "配置4",
						id: 4,
						price: 8,
						leftnum: 100,
						deposit: 0,
					},
				],
				pickerOptions: {
					disabledDate(time) {
						return time.getTime() < Date.now() - 8.64e7;
					}
				},
			};
		},
		// 页面加载获取数据
		created: function() {

			this.getAddress()
		},
		//页面元素赋值
		onLoad() {
			if(!this.$cookies.isKey("userId")){
				this.$alert('您还未登录，请先登录！', '错误', {
					confirmButtonText: '确定',
				});
				uni.redirectTo({
					url: "UserLoginIndex"
				})
			}
			let obj1 = JSON.parse(this.$cookies.get("settings"))
			let obj2 = JSON.parse(this.$cookies.get("date"))
			this.goodsName = this.$cookies.get("goodsName")
			this.shopName = this.$cookies.get("shopName")
			this.description = this.$cookies.get("description")
			this.settings = obj1
			this.radio = parseInt(this.$cookies.get("radio"))
			this.date = obj2
			this.num = this.$cookies.get("num")
			this.setTotalPrice()
			this.isLoad = true
			this.$cookies.set("isLoad", this.isLoad)
			this.imgSrc[0] = this.$cookies.get("orderImg")
		},

		methods: {
			//计数器控制方法
			handleNumChange() {
				if (this.leftnum == 0) {
					num = 0;
				}
				this.setTotalPrice();
			},
			// 日期选择器控制方法
			handleChange() {
				this.dateIsChanged = true
				this.setTotalPrice()
			},

			//计算总价方法
			setTotalPrice() {
				this.totalPrice = this.settings[this.radio - 1].price * ((Date.parse(this.date[1]) - Date.parse(this.date[
						0])) / 86400000) * this
					.num;
				this.payment = this.totalPrice + (this.settings[this.radio - 1].deposit * this.num);
			},
			//时间格式转换方法
			transformTime() {
				for (var i = 0; i < 2; i++) {
					this.year[i] = this.date[i].getFullYear()
					this.month[i] = this.date[i].getMonth() + 1
					this.month[i] = this.month[i] < 10 ? ('0' + this.month[i]) : this.month[i]
					this.day[i] = this.date[i].getDate()
					this.day[i] = this.day[i] < 10 ? ('0' + this.day[i]) : this.day[i]
					this.date[i] = this.year[i] + '/' + this.month[i] + '/' + this.day[i];
				}
			},
			//获取下单时间方法
			getOrderTime() {
				var mydate = new Date();
				this.rentTime = mydate.toLocaleDateString();
			},
			//获取用户地址id
			getAddressId() {
				this.addressId = this.users[this.addressradio - 1].id
			},
			//下单成功跳转方法
			openOrderSuccessWindow() {
				this.$alert('下单成功', '提示', {
					confirmButtonText: '确定',
					callback: action => {

						uni.navigateTo({
							url: "GoodsDetail?id=" + this.$cookies.get("goodsId")
						})

					},
					showClose: false,
				});
			},
			//获取用户地址方法
			async getAddress() {
				var that = this;
				// this.pageId=1;
				await this.$axios({
					methods: 'get',

					url: '/Address/getAllByCustomerName?CustomerName=' + this.$cookies.get("userName"),

				}).then(res => {
					this.users = res.data.date
				}).catch(err => {
					
				})
			},

			//确认订单按钮方法
			confirmOrder() {
				this.$confirm('确定要下单吗？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					if (this.dateIsChanged == true) {
						this.transformTime()
					}
					this.getOrderTime()
					this.getAddressId()

					this.$axios({
						method: "post",
						url: "/Order/orderNewOrder?addressId=" + this.addressId,
						data: {
							"leaseStartTime": this.date[0],
							"leaseEndTime": this.date[1],
							"customerId": this.$cookies.get("userId"),
							"sku": {
								"id": this.$cookies.get("goodsId")
							},
							"orderDate": this.rentTime,
							"specificationIndex": parseInt(this.radio - 1),
							"num": this.num,
							"state": "待发货",
							"sumOfMoney": this.payment,
							"sumOfRent": this.totalPrice,
						}
					}).then((res) => {
						console.log(res.data);
					})
					console.log(this.$cookies.get("goodsId"))
					this.openOrderSuccessWindow()
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消提交订单'
					});
				});


			},
			
			//退出登录提示窗口
			openLogOutWindow() {
				this.$confirm('确定要退出登录吗？退出登录将返回首页', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$cookies.remove("userName")
					this.$cookies.remove("userId")
					this.$cookies.remove("userFaceImg")
					uni.redirectTo({
						url: 'Userindex'
					})
					location.reload()
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消退出登录'
					});
				});
			},
			//退出登录
			logOut() {
				this.openLogOutWindow()
			},
		},
	};
</script>

<style>
	.main {
		display: flex;
		flex-direction: column;
		position: absolute;
		width: 100%;
		float: left;
	}

	/* 顶栏style */
	.header {
		width: 100%;
		height: 99rpx;
		display: flex;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		position: relative;
		z-index: 10;
	}

	.logo {
		margin-left: 5%;
	}

	.navitems {
		margin: auto;
		display: flex;
		margin-right: 5%;
	}

	.navitem {
		font-size: 15px;
		margin-left: 50rpx;
	}



	.title {
		margin-left: 12%;
		margin-top: 40rpx;
	}

	.infobar {
		width: 100%;
		background-color: #D1DBE5;
		margin-top: 40rpx;
		height: 25px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.infomsg {
		font-size: 13px;
		color: #606266;
	}

	.goodsinfo {
		width: 100%;
		display: flex;
		flex-direction: row;
		height: 500rpx;
	}

	.confirmImg {
		width: 20%;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 500rpx;
		margin-left: 10%;
	}

	.Img {
		width: 400rpx;
		height: 400rpx;
		background-color: white;
	}

	.goodsImg_content {
		width: 400rpx;
		height: 400rpx;
	}

	.goodsDetail1 {
		width: 30%;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 500rpx;
		margin-left: 5rpx;
	}

	.gooodsDetail1_content {
		width: 100%;
		height: 500rpx;
		background-color: white;
		display: flex;
		flex-direction: column;
	}

	.goodsParamHeight {
		height: 25%;
	}

	.goodsnamerow {
		width: 100%;
		display: flex;
		align-items: center;
		float: right;
	}

	.descriptionRow {
		width: 100%;
		display: flex;
		align-items: center;
		float: right;
	}

	.goodsName {
		width: 50%;
	}

	.shop {
		width: 30%;
		float: right;
	}

	.pricerow {
		display: flex;
		align-items: center;
		float: left;
	}

	.showprice {
		font-size: 20px;
		color: #ff3e3e;
	}

	.settingrow {
		display: flex;
		align-items: center;
		width: 150%;
	}

	.settingbox {
		display: flex;
		flex-direction: row;
		float: left;
	}

	.goodsDetail2 {
		width: 30%;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 500rpx;
		margin-left: 5rpx;
	}

	.goodsDetail2_content {
		width: 90%;
		height: 400rpx;
		background-color: white;
	}

	.rentTimeRow {
		width: 150%;
		display: flex;
		flex-direction: row;
	}

	.rentNumRow {
		width: 150%;
		display: flex;
		flex-direction: row;
	}

	.address {
		width: 100%;
		display: flex;
		flex-direction: row;
	}

	.address_box {
		width: 40%;
		display: flex;
		flex-direction: column;
		min-height: 400rpx;
		margin-left: 10%;
	}

	.addressMsg {
		width: 90%;
		margin-top: 2%;
		align-self: center;
		background-color: white;
		height: 20%;

	}

	.address_content {
		width: 90%;
		align-self: center;
		background-color: white;
		height: 65%;
		display: flex;
		flex-direction: column;
		margin-top: 50rpx;
	}

	.addressitem {
		width: 100%;
		font-size: 20px;
		height: 30rpx;
	}

	.confirm {
		width: 100%;
		display: flex;
		flex-direction: row;
		height: 500rpx;
	}

	.confirm_box {
		width: 40%;
		display: flex;
		flex-direction: column;
		height: 200rpx;
		margin-left: 10%;
		margin-top: 5rpx;
	}

	.confirmPrice {
		width: 90%;
		margin-top: 2%;
		align-self: center;
		background-color: white;
		display: flex;
		flex-direction: row;
	}

	.totalPrice {
		font-size: 25px;
		color: #ff3e3e;
	}

	.confirmButton {
		width: 90%;
		align-self: center;
		height: 1000px;
		margin-top: 30rpx;
		margin-bottom: 30rpx;
	}
</style>
